<template>
  <div class="template-detail-page">
    <!-- 页面主要内容容器 -->
    <div class="main-container">
      <!-- 左侧信息列 -->
      <div class="left-column">
        <!-- 模板标题和价格 -->
        <div class="template-header">
          <h1 class="template-title">园区公众号模板</h1>
          <div class="template-price">
            ¥399<span class="price-unit">起</span>
          </div>
        </div>

        <!-- 适用场景标签 -->
        <div class="template-section">
          <div class="section-label">适用场景</div>
          <div class="tags-container">
            <span class="tag-item">管理考勤</span>
            <span class="tag-item">企业互动</span>
            <span class="tag-item">员工办公</span>
            <span class="tag-item">品牌传播</span>
          </div>
        </div>

        <!-- 使用数据 -->
        <div class="template-section">
          <div class="section-label">使用数据</div>
          <div class="stats-container">
            <div class="stat-item">
              <div class="stat-value">12458</div>
              <div class="stat-label">使用次数</div>
            </div>
            <div class="stat-item rating-item">
              <div class="stat-value">4.5</div>
              <div class="stat-label">综合评分</div>
            </div>
          </div>
        </div>

        <!-- 模板信息 -->
        <div class="template-section">
          <div class="section-label">
            <span>模板信息</span>
            <!-- <i class="iconfont icon-xiangshangjiantou"></i> -->
          </div>
          <div class="info-list">
            <div class="info-item flex">
              <span class="info-label info-label-flex">创建时间</span>
              <span class="info-value info-value-flex">2024-12-12</span>
            </div>
            <div class="info-item flex">
              <span class="info-label info-label-flex">最近更新</span>
              <span class="info-value info-value-flex">2025-8-18</span>
            </div>
            <div class="info-item flex">
              <span class="info-label info-label-flex">支持设备</span>
              <span class="info-value info-value-flex">移动端</span>
            </div>
          </div>
        </div>

        <!-- 模板描述 -->
        <div class="template-section flex-section">
          <div class="section-label flex-label">模板描述</div>
          <p class="template-description flex-description">
            园区公众号模板功能上集成服务与互动模块，部分为入口、活动报名、后台管理等基础配置，涵盖公告管理、活动管理、员工管理等实用需求，又通过风格与元素展现园区特色，平衡功能性与形象。
          </p>
        </div>

        <!-- 扫码预览 -->
        <div class="template-section flex-section">
          <div class="section-label flex-label">扫码预览</div>
          <div class="qrcode-container flex-qrcode">
            <img
              src="@/assets/qrcode_website.png"
              alt="公众号预览二维码"
              class="qrcode-image"
            />
          </div>
        </div>
        <div class="info-list">
          <div class="info-item flex">
            <span class="info-label info-label-flex">公众号链接</span>
            <span class="info-value info-value-flex"
              ><a
                href="https://example.com/payment-confirm"
                class="link-text"
                target="_blank"
                >https://example.com/payment-confirm</a
              ></span
            >
          </div>
        </div>

        <!-- 管理指南 -->
        <div class="template-section flex-section management-section">
          <div class="section-label f12 flex-label">管理端连接</div>
          <div class="guide-steps flex-guide">
            <div class="guide-step">
              <span class="step-number">第一步</span>
              <span class="step-content">点击头像；</span>
            </div>
            <div class="guide-step">
              <span class="step-number">第二步</span>
              <span class="step-content">点击申请内容；</span>
            </div>
            <div class="guide-step">
              <span class="step-number">第三步</span>
              <span class="step-content">进入管理系统</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间预览列 -->
      <div class="center-column">
        <!-- 预览切换标签 -->
        <div class="preview-tabs">
          <PublicNavBar
            :isFlex="true"
            backgroundColor=""
            :items="navbarList"
            direction="horizontal"
            :horizontalWidth="horizontalWidth"
            @handleItemClick="navbarClick"
            :activeIndex="activeNavbarIndex"
            :itemSpacingArray="[0, 10, 0, 0]"
          />
        </div>

        <!-- 手机预览 -->
        <div class="phone-preview-container">
          <img
            src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
            alt="模板手机预览"
            class="phone-image"
          />
        </div>

        <!-- 底部预览滑动区域 - 移到center-column内部 -->
        <div class="preview-slides-container">
          <div class="slides-wrapper">
            <ScrollList class="card" :speed="1" ref="ItemScroll">
              <div
                class="slide-item"
                :class="{ active: activeSlideIndex === 0 }"
                @click="selectSlide(0)"
              >
                <div class="slide-content">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
                    alt="首页预览"
                    class="slide-image"
                  />
                </div>
                <span
                  class="slide-label"
                  :class="{ active: activeSlideIndex === 0 }"
                  >首页</span
                >
              </div>
              <div
                class="slide-item"
                :class="{ active: activeSlideIndex === 1 }"
                @click="selectSlide(1)"
              >
                <div class="slide-content">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back2.png"
                    alt="通知预览"
                    class="slide-image"
                  />
                </div>
                <span class="slide-label"  :class="{ active: activeSlideIndex === 1 }">通知</span>
              </div>
              <div
                class="slide-item"
                :class="{ active: activeSlideIndex === 2 }"
                @click="selectSlide(2)"
              >
                <div class="slide-content">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back3.png"
                    alt="活动预览"
                    class="slide-image"
                  />
                </div>
                <span class="slide-label"  :class="{ active: activeSlideIndex === 2}">活动</span>
              </div>
              <div
                class="slide-item"
                :class="{ active: activeSlideIndex === 3 }"
                @click="selectSlide(3)"
              >
                <div class="slide-content">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back4.png"
                    alt="活动详情预览"
                    class="slide-image"
                  />
                </div>
                <span class="slide-label"  :class="{ active: activeSlideIndex === 3 }">活动详情</span>
              </div>
              
            </ScrollList>
          </div>
        </div>
      </div>

      <!-- 右侧操作和相似模板列 -->
      <div class="right-column">
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="primary-button">开启我的微官网</button>
          <button class="secondary-button">
            <i class="el-icon-scanning"></i> 扫码预览
          </button>
        </div>

        <!-- 相似模板 -->
        <div class="similar-templates">
          <!-- 促销模板部分 -->
          <div class="template-category">
            <h4 class="category-title">促销模板</h4>
            <div class="template-grid">
              <!-- 模板项 1 -->
              <div class="template-item">
                <div class="template-preview">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
                    alt="智慧园区"
                    class="template-image"
                  />
                </div>
                <div class="template-name">智慧园区</div>
                <div class="template-meta">
                  <div class="template-subtitle">实体零售</div>
                  <div class="template-stats">1000+人购买过</div>
                </div>
              </div>

              <!-- 模板项 2 -->
              <div class="template-item">
                <div class="template-preview">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
                    alt="智慧园区"
                    class="template-image"
                  />
                </div>
                <div class="template-name">智慧园区</div>
                <div class="template-meta">
                  <div class="template-subtitle">实体零售</div>
                  <div class="template-stats">1000+人购买过</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 热销模板部分 -->
          <div class="template-category">
            <h4 class="category-title">热销模板</h4>
            <div class="template-grid">
              <!-- 模板项 3 -->
              <div class="template-item">
                <div class="template-preview">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
                    alt="智慧园区"
                    class="template-image"
                  />
                </div>
                <div class="template-name">智慧园区</div>
                <div class="template-meta">
                  <div class="template-subtitle">实体零售</div>
                  <div class="template-stats">1000+人购买过</div>
                </div>
              </div>

              <!-- 模板项 4 -->
              <div class="template-item">
                <div class="template-preview">
                  <img
                    src="https://lingxin1314.oss-cn-beijing.aliyuncs.com/tem_back1.png"
                    alt="智慧园区"
                    class="template-image"
                  />
                </div>
                <div class="template-name">智慧园区</div>
                <div class="template-meta">
                  <div class="template-subtitle">实体零售</div>
                  <div class="template-stats">1000+人购买过</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ScrollList from "@/components/public/ScrollList";
// 引用公共的导航栏组件
import PublicNavBar from "@/components/public/NavBar";
export default {
  name: "prodcutTemplate",
  components: {
    PublicNavBar,
    ScrollList,
  },
  data() {
    return {
      dataList: [
        { label: "恭喜发财", time: "20240122" },
        { label: "恭喜发财", time: "20240123" },
        { label: "恭喜发财", time: "20240124" },
        { label: "恭喜发财", time: "20240125" },
        { label: "恭喜发财", time: "20240126" },
        { label: "恭喜发财", time: "20240127" },
        { label: "恭喜发财", time: "20240128" },
        { label: "恭喜发财", time: "20240129" },
        { label: "恭喜发财", time: "20240110" },
        { label: "恭喜发财", time: "20240111" },
      ],
      // 控制 切换下一页是丝滑切换数据 还是回到顶部再滚动
      isSmoothSwitch: false,
      // 可以根据需要添加数据
      activeIndex: 0,
      activeNavbarIndex: 0,
      horizontalWidth: "60%",
      navbarList: [
        { label: "微官网", path: "" },
        { label: "PC端官网", path: "" },
      ],
      // 添加当前选中的幻灯片索引
      activeSlideIndex: 0,
    };
  },
  methods: {
    // 可以根据需要添加方法
    navbarClick(obj) {
      console.log("点击的是", obj);
      if (obj.index == 0) this.horizontalWidth = "60%";
      else this.horizontalWidth = "70%";
      this.activeNavbarIndex = obj.index;
    },

    // 选择幻灯片的方法
    selectSlide(index) {
      this.activeSlideIndex = index;
      // 可以在这里添加其他逻辑，比如更新主预览图等
    },
  },
};
</script>

<style scoped>
.template-detail-page {
  /* padding: 20px; */
  background-color: #f8f9fa;
  /* min-height: 100vh; */
}

/* 主容器 - 三列布局 */
.main-container {
  display: flex;
  /* gap: 20px; */
  /* max-width: 1400px; */
  margin: 0 auto;
}

/* 左侧信息列 */
.left-column {
  width: 380px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 模板标题和价格 */
.template-header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.template-title {
  font-size: 18px;
  color: #323232;
  margin-bottom: 10px;
  font-weight: bold;
}

.template-price {
  font-size: 24px;
  color: #348cf8;
  font-weight: bold;
}

.price-unit {
  font-size: 16px;
  font-weight: normal;
}

/* 通用区块样式 */
.template-section {
  margin-bottom: 20px;
  /* padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0; */
}

.template-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-label {
  font-size: 14px;
  color: #656565;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  /* font-weight: bold; */
}

/* 标签容器 */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
}

/* 统计数据 */
.stats-container {
  display: flex;
  /* justify-content: space-around; */
}

.stat-item {
  text-align: center;
}

/* 评分统计项额外样式 */
.rating-item {
  margin-left: 70px;
}

.stat-value {
  font-size: 18px;
  color: #323232;
  font-weight: bold;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

/* 信息列表 */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  /* justify-content: space-between; */
  font-size: 12px;
}

.info-label {
  color: #999;
}

.info-value {
  color: #323232;
}

/* flex布局的2:7比例分配 */
.info-label-flex {
  flex: 2;
}

.info-value-flex {
  flex: 7;
}

/* 模板描述 */
.template-description {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 扫码预览 */
.qrcode-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

/* 左侧flex布局的扫码预览容器 */
.flex-qrcode {
  flex: 7;
  justify-content: flex-start;
  margin-top: -10px;
}

.qrcode-image {
  width: 120px;
  height: 120px;
}

.wechat-link {
  font-size: 12px;
  color: #666;
  text-align: center;
}

.link-text {
  color: #1890ff;
  text-decoration: none;
}

/* 管理指南 */
.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-step {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.step-number {
  /* background-color: #e6f7ff;
  color: #1890ff; */
  /* padding: 2px 8px; */
  /* border-radius: 4px; */
  /* margin-right: 10px; */
  font-size: 10px;
}

/* 中间预览列 */
.center-column {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;
  /* padding: 20px; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  width: calc(100% - 780px);
}

/* 预览标签 */
.preview-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 20px;
}

.tab-item {
  padding: 8px 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.tab-item.active {
  background-color: #1890ff;
  color: #fff;
}

/* 手机预览容器 */
.phone-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 450px;
}

.phone-image {
  max-width: 100%;
  max-height: 430px;
  margin-top: 40px;
}

/* 右侧操作和相似模板列 */
.right-column {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.primary-button {
  background-color: #1890ff;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.primary-button:hover {
  background-color: #40a9ff;
}

.secondary-button {
  background-color: #fff;
  color: #1890ff;
  border: 1px solid #1890ff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.secondary-button:hover {
  background-color: #f0f8ff;
}

/* 相似模板 */
.similar-templates {
  flex: 1;
}

/* 模板分类 */
.template-category {
  margin-bottom: 20px;
}

.category-title {
  font-size: 18px;
  color: #8d8c8c;
  margin-bottom: 15px;
}

/* 模板网格布局 */
.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* 单个模板项 */
.template-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.3s;
}

.template-item:hover {
  transform: translateY(-2px);
}

/* 模板预览容器 */
.template-preview {
  width: 100%;
  background-color: #e6f7ff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.template-image {
  width: 100%;
  max-height: 102px;
  object-fit: contain;
}

.template-name {
  font-size: 14px;
  color: #323232;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: left;
  align-self: flex-start;
}

/* 元信息容器 - 用于放置实体零售和购买统计 */
.template-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.template-subtitle {
  font-size: 12px;
  color: #aa7123;
  margin: 0;
  text-align: left;
}

.template-stats {
  font-size: 12px;
  color: #323232;
  margin: 0;
  text-align: right;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .template-grid {
    grid-template-columns: 1fr;
  }
}

/* 底部预览滑动区域 */
.preview-slides-container {
  background-color: #fff;
  /* padding: 20px; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 41px;
}

/* 自定义滚动条样式 - Webkit浏览器 */
.preview-slides-container::-webkit-scrollbar {
  height: 6px;
}

.preview-slides-container::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.preview-slides-container::-webkit-scrollbar-thumb {
  background: #1890ff;
  border-radius: 3px;
}

.preview-slides-container::-webkit-scrollbar-thumb:hover {
  background: #40a9ff;
}

.slides-wrapper {
  display: flex;
  gap: 27px;
  /* 确保内容不换行 */
  white-space: nowrap;
  /* 增加一点内边距让最后一个元素有空间 */
}

.slide-item {
  width: 143px;
  height: 165px;
  text-align: center;
  background-color: #e8f1fd;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 22px;
}

/* 移除行内样式，统一用CSS类控制 */
/* .slide-item[style*="border: 1px solid red"] {
  border: 1px solid #34C3F8 !important;
} */

.slide-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}

.slide-content {
  max-height: 110px;
  max-width: 80px;
  margin: 10px auto;
  overflow: hidden;
  margin-bottom: 2px !important;
}

.slide-item.active {
  border: 1px solid #1890ff;
  /* background-color: #fff; */
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
  transform: translateY(-2px);
}

/* 活动标签特殊样式 */
/* .slide-item:nth-child(3)::after {
  content: "169.47";
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #ff4d4f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
} */

.slide-image {
  object-fit: cover;
  margin-bottom: 8px;
  border-radius: 4px;
  width: 100%;
  height: auto;
}

.slide-label {
  font-size: 14px;
  color: #323232;
  font-weight: 500;
  display: block;
  margin-top: 5px;
}
.slide-label.active {
  color: #348cf8 !important;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-container {
    flex-direction: column;
  }

  .left-column,
  .right-column {
    width: 100%;
  }
}

/* 新增的flex布局样式 */
.flex-section {
  display: flex;
}

.flex-label {
  flex: 2;
  font-size: 12px;
  color: #999;
}

.flex-description {
  flex: 7;
}

.flex-guide {
  flex: 7;
}

/* 管理端连接特殊样式 */
.management-section {
  margin-top: 10px;
}
</style>
